<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>财产记录管理</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f6f8;
            padding: 20px;
        }
        h1 {
            text-align: center;
            color: #333;
        }
        .nav-bar {
            display: flex;
            justify-content: flex-end;
            margin-bottom: 20px;
        }
        .nav-bar a {
            margin-left: 15px;
            text-decoration: none;
            color: #0066cc;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
            background-color: white;
        }
        th, td {
            padding: 12px;
            border: 1px solid #ddd;
            text-align: center;
        }
        th {
            background-color: #f2f2f2;
        }
        tr:nth-child(even) {
            background-color: #fafafa;
        }
    </style>
</head>
<body>

<h1>查询交易记录列表</h1>

<div class="nav-bar">
    <a href="AdminHome.html">退出</a>
</div>

<table id="withdrawTable">
    <thead>
    <tr>
        <th>账户ID</th>
        <th>账户余额</th>
        <th>更新时间</th>
        <th>状态</th>
    </tr>
    </thead>
    <tbody>
    <!-- 数据通过 JavaScript 动态插入 -->
    </tbody>
</table>

<script>
    fetch('/api/account/getAccount')
        .then(response => {
            if (!response.ok) {
                throw new Error("网络响应失败");
            }
            return response.json();
        })
        .then(data => {
            const tbody = document.querySelector("#withdrawTable tbody");
            data.forEach(record => {
                const row = document.createElement("tr");
                row.innerHTML = `
                    <td>${record.accountId}</td>
                    <td>${record.balance}</td>
                    <td>${new Date(record.operationTime).toLocaleString()}</td>
                    <td>${record.status}</td>
                `;
                tbody.appendChild(row);
            });
        })
        .catch(error => {
            console.error('获取数据失败:', error);
            alert('无法加载取款记录，请检查网络或后端服务');
        });
</script>

</body>
</html>
